<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
    <script src="china.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        let dataList = [
   { name: '澳门', value: 0 },
   { name: '香港', value: 14 },
   { name: '台湾', value: 6 },
   { name: '新疆', value: 0 },
   { name: '宁夏', value: 0 },
   { name: '青海', value: 0 },
   { name: '甘肃', value: 0 },
   { name: '陕西', value: 61 },
   { name: '西藏', value: 0 },
   { name: '云南', value: 0 },
   { name: '贵州', value: 121 },
   { name: '四川', value: 0 },
   { name: '重庆', value: 2 },
   { name: '海南', value: 0 },
   { name: '广西', value: 0 },
   { name: '广东', value: 434 },
   { name: '湖南', value: 0 },
   { name: '湖北', value: 1 },
   { name: '河南', value: 0 },
   { name: '山东', value: 0 },
   { name: '江西', value: 0 },
   { name: '福建', value: 0 },
   { name: '安徽', value: 0 },
   { name: '浙江', value: 0 },
   { name: '江苏', value: 0 },
   { name: '上海', value: 66 },
   { name: '黑龙江', value: 0 },
   { name: '吉林', value: 0 },
   { name: '辽宁', value: 0 },
   { name: '内蒙古', value: 0 },
   { name: '山西', value: 0 },
   { name: '河北', value: 0 },
   { name: '天津', value: 0 },
   { name: '北京', value: 128 }
];
option = {
   tooltip: {
      triggerOn: "click",
      formatter: function (e, t, n) {
         return '.5' == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
      }
   },
   visualMap: {
      min: 0,
      max: 100000,
      left: 26,
      bottom: 40,
      showLabel: true,
      text: ["高", "低"],
      pieces: [{
         gt: 200,
         label: "> 200人",
         color: "#7f1100"
      }, {
         gte: 100,
         lte: 200,
         label: "100 - 200人",
         color: "#ff5428"
      }, {
         gte: 10,
         lt: 100,
         label: "10 - 100人",
         color: "#ff8c71"
      }, {
         gte: 1,
         lt: 10,
         label: "1 - 10人",
         color: "#ffd768"
      }, {
         value: 0,
         label: "0人",
         color: "#BEDAEE"
      }],
      show: true
   },
   geo: {
      map: "china",
      roam: true,
      scaleLimit: {
         min: 1,
         max: 2
      },
      zoom: 1.13,
      top: 50,
      label: {
            show: true,
            fontSize: "14",
            color: "rgba(0,0,0,0.7)"
      },
      itemStyle: {
         borderColor: "rgba(0, 0, 0, 0.2)"
      },
      emphasis: {
         areaColor: "#f2d5ad",
         shadowOffsetX: 0,
         shadowOffsetY: 0,
         borderWidth: 0
      }
   },
   series: [{
      name: "确诊病例",
      type: "map",
      geoIndex: 0,
      data: dataList
   }]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>    
</body>
</html>